<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>控制面板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../admin/css/other/console.css" />
</head>

<body>
    <div class="console-container">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-md7 layui-col-space10">
                <div class="layui-row layui-col-space30">
                    <div class="layui-col-md6">
                        <div class="num-card">
                            <img src="../../admin/images/console/icon_sssl.png" class="card-img" />
                            <div class="card-content">
                                <div class="title-content">赛事数量</div>
                                <div class="num-content">2</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="num-card">
                            <img src="../../admin/images/console/icon_xssl.png" class="card-img" />
                            <div class="card-content">
                                <div class="title-content">选手数量</div>
                                <div class="num-content">82</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space30">
                    <div class="layui-col-md6">
                        <div class="num-card">
                            <img src="../../admin/images/console/icon_zdsl.png" class="card-img" />
                            <div class="card-content">
                                <div class="title-content">战队数量</div>
                                <div class="num-content">18</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="num-card">
                            <img src="../../admin/images/console/icon_jdsl.png" class="card-img" />
                            <div class="card-content">
                                <div class="title-content">节点数量</div>
                                <div class="num-content">12</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12 system-status-card">
                        <div class="title-content"><img src="../../admin/images/console/icon_xtzt.png" class="title-icon" /><span>系统状态</span></div>
                        <div class="chart-container">
                            <div id="fzztChart" style="width: 140px; height: 140px;"></div>
                            <div id="cpuChart" style="width: 140px; height: 140px;"></div>
                            <div id="cpChart" style="width: 140px; height: 140px;"></div>
                            <div id="ncChart" style="width: 140px; height: 140px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md5 layui-col-space10 right-container-col">
                <div class="right-container">
                    <div class="user-info-content">
                        <div class="tx-content"><img src="../../admin/images/console/img_tx.png" class="tx-img" /></div>
                        <div class="user-name-content"><span id="userName" class="user-name-span">admin</span>, 欢迎回来！</div>
                        <div class="time-content">数据更新时间：<span id="newTime"></span></div>
                    </div>
                    <div class="menu-content">
                        <div class="menu-item">
                            <img src="../../admin/images/console/icon_mb_xsgl.png" class="menu-item-icon" /><span>选手管理</span>
                        </div>
                        <div class="menu-item">
                            <img src="../../admin/images/console/icon_mb_zdgl.png" class="menu-item-icon" /><span>战队管理</span>
                        </div>
                        <div class="menu-item">
                            <img src="../../admin/images/console/icon_mb_flgl.png" class="menu-item-icon" /><span>分类管理</span>
                        </div>
                        <div class="menu-item">
                            <img src="../../admin/images/console/icon_mb_sszx.png" class="menu-item-icon" /><span>赛事中心</span>
                        </div>
                        <div class="menu-item">
                            <img src="../../admin/images/console/icon_mb_gjgl.png" class="menu-item-icon" /><span>工具管理</span>
                        </div>
                        <div class="menu-item">
                            <img src="../../admin/images/console/icon_mb_xnjd.png" class="menu-item-icon" /><span>虚拟节点</span>
                        </div>
                        <div class="menu-item">
                            <img src="../../admin/images/console/icon_mb_zdgl.png" class="menu-item-icon" /><span>站点配置</span>
                        </div>
                        <div class="menu-item">
                            <img src="../../admin/images/console/icon_mb_lbpz.png" class="menu-item-icon" /><span>轮播配置</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function getOptions (num, color, title) {
            return {
                grid: {
                    top: "0",
                    left: "0",
                    right: "0",
                    bottom: "0",
                    containLabel: true,
                },
                series: [
                    {
                        name: "Pressure",
                        type: "gauge",
                        center: ['50%', '50%'], // 图形位置
                        radius: '100%',
                        detail: {
                            offsetCenter: [ 0, 5],
                            formatter: function(){
                                return "{name|" + num +"%}"+"\n"+"{unit|风险数量}"
                            },
                            textStyle: {	// 设置样式
                                rich: {
                                    name: {
                                        fontSize: 32,
                                        color: '#ffffff',
                                        fontWeight: 'bold',
                                    },
                                    unit: {
                                        fontSize: 14,
                                        color: '#ffffff',
                                        opacity: 0.4,
                                    }
                                }
                            }
                        },
                        startAngle: 90,
                        endAngle: -360,
                        pointer: {
                            show: false,
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true,
                            clip: false,
                            itemStyle: {
                                color: color,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [
                                    [1, color],  // 100% 处的颜色
                                    [num / 100, color],  // 当前进度处的颜色
                                    [0, 'rgba(255, 255, 255, 0.7)']  // 0% 处的颜色，也即剩余进度的颜色（会被覆盖）
                                ]
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false,
                        },
                        //刻度
                        axisLabel: {
                            show: false
                        }, 
                        data: [ { value: num } ],
                    }
                ],
            }
        }
		layui.use(['jquery', 'echarts', 'form', 'button', 'popup'], function () {
            echarts = layui.echarts;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('fzztChart'));
            const option = getOptions(18, '#745FFF', '负载状态');
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            var cpuChart = echarts.init(document.getElementById('cpuChart'));
            const cpuChartoption = getOptions(50, '#1C73E1', 'CPU使用率');
            // 使用刚指定的配置项和数据显示图表。
            cpuChart.setOption(cpuChartoption);
            var cpChart = echarts.init(document.getElementById('cpChart'));
            const cpChartoption = getOptions(25, '#EFAF73', '磁盘使用率');
            // 使用刚指定的配置项和数据显示图表。
            cpChart.setOption(cpChartoption);
            var ncChart = echarts.init(document.getElementById('ncChart'));
            const ncChartoption = getOptions(72, '#11D1B6', '内存使用率');
            // 使用刚指定的配置项和数据显示图表。
            ncChart.setOption(ncChartoption);

            var now = new Date();
            var hours = now.getHours().toString().padStart(2, '0');
            var minutes = now.getMinutes().toString().padStart(2, '0');
            var seconds = now.getSeconds().toString().padStart(2, '0');
            document.getElementById('newTime').textContent = now.getFullYear() + '-' + (parseInt(now.getMonth()) + 1) + '-' + now.getDate() + ' ' + hours + ':' + minutes + ':' + seconds;
        });

    </script>
</body>

</html>